Good Visual Design, Explained 優秀的視覺設計解析
原則一：Grid Use and Alignment（網格與對齊）
- 所有元素與列對齊（圖片、標題、正文、按鈕均落在網格列內）。
- 跨列時保持節奏一致（跨兩列的內容必須跨完整列,不要半對齊半不對齊）。
- 合理的 gutter（欄距）大小，給內容留呼吸空間，也確保視覺分組。
- 多個頁面的版式可預測、一致。
① Flamingo Estate：3 列網格 + 窄欄距
窄 gutter 讓商品之間"剛好分開但不疏離"。商品卡片嚴格對齊列，頁面非常穩定、整潔。
② Figma Shortcut：4 列網格 + 寬欄距
中間兩列寫正文；左右列放標註。寬欄距給了右側標註足夠空間，讓閱讀體驗更輕鬆。跨列內容進入欄距是正常行為，但保持"跨列的統一節奏"。
UX視覺設計師的實操方法
標準 Web 12-column grid：1128px寬度， 72 列寬，24 欄距,12欄
72 column width, 24 gutter, 12 columns
商品型/卡片型：可用 3–4 列的寬列 grid，更穩定。
內容型（部落格/文章）：12列，欄距 24中間窄，兩側留邊，保證主閱讀區。
記住：設計不對齊，人類肉眼一眼就看出來。對齊是第一準則。
Use of a Typographic System（排版系統）
- 最多 3 級文字層級（Headline / Body / Caption）。
- 字號差異清晰，不靠顏色或加粗硬撐層級。
- 行長適中：45–75 字元。
- 行距略大於預設（120–150%），形成鬆緊得當的閱讀節奏。
字號
① Seed.com：用"字號"建立層級，而不是顏色或粗細
1 個字型家族＋1 個顏色，卻能清晰分層。3 個字號大小決定閱讀順序，非常典型。
② Figma Shortcut：為閱讀最佳化的正文
- 三種文字層級：大標題、中號正文、小號 Callout。
- 行距略拉大 + 文字行長縮短，閱讀不卡頓，不跳行。
UX視覺設計師實操方法
標準層級體系：
- H1：32–40px
- Body：16–18px
- Caption：12–14px
- 正文 line-height：1.4–1.6。
- 正文最大寬度：600–720px。
- 避免 5、6、7 個字號混亂。
- 不要一會兒 14、一會兒 15 一致性是排版的靈魂。
| 專案 | 英文（English） | 中文（Chinese） | 說明 / UX 解釋 |
|---|---|---|---|
| 最佳行長（Characters per Line） | 45–75 characters | 35–45 字 | 最舒適閱讀區間，避免跳行/過度換行 |
| 可接受行長區間 | 40–90 characters | 25–50 字 | 超出此區間閱讀壓力明顯上升 |
| 正文行距（Line-height） | 1.4–1.6 | 1.5–1.75 | 中文筆畫密度高，需要更大行距 |
| 小字行距 | 1.3–1.4 | 1.4–1.6 | 小字號若行距不夠會“糊在一起” |
| 大標題行距 | 1.1–1.25 | 1.2–1.35 | 大字號保持緊湊、穩重 |
| 標準欄寬 Column Width（px） | 72–96 px（業界黃金範圍） | 72–96 px（中英通用） | 這是大多數 12-column 系統採用的列寬範圍 |
| 常用欄寬組合（實際設計最常使用） | 72 / 80 / 96 px | 72 / 80 / 96 px | Figma、Shopify、Airbnb、Untitled UI 主流引數 |
| 推薦 Gutter（欄距） | 16–24 px | 20–32 px | 中文內容密度高，gutter 稍大更易讀 |
| 內容區寬度（Content Width） | 1100–1200 px | 1100–1200 px | 最佳閱讀寬度，適合設計系統 |
欄寬 行距
Strategic Color Palette（策略性的色彩使用）
- 限制色彩數量（主色1–2個 + 輔助色極少）。
- 色彩的功能性明確：強調、背景、品牌意圖一致。
- 避免高飽和 neon 色（破壞層級、容易"髒"）。
- 讓內容成為主角，而不是顏色本身。
① Seed.com：純綠＋白的單色系
綠色層級微妙，柔和、不刺眼，符合"科學＋自然"的品牌感。單色系保證介面"乾淨、可信賴"。
② Flamingo Estate：白＋綠，讓照片成為主角
頁面顏色越少，圖片越突出。產品照片自然成為視覺焦點。
懸停時，影象會變化，顯示有關產品的附加資訊（在此情況下，番茄的出現暗示了肥皂的成分和香氣）。“加入購物籃”按鈕也居中對齊，進一步增強了設計的平衡感。
UX視覺設計師實操方法
配色公式：
- 品牌主色：1
- 輔助色：1（可選）
- 灰階：4–6 級灰即可覆蓋所有 UI
色彩用途固定：
- 主色＝CTA
- 灰色＝內容層級
- 不要用主色給大量背景"刷牆"。
- 少即是多：色彩越少，設計越高階。
Useful Imagery（圖片的目的性）
- 圖片必須傳達資訊，而不是裝飾。
- 構圖乾淨，不要背景噪聲。
- 圖片在網格中居中或嚴格對齊。
- 圖片與文字的結合有意義（資訊增強，非幹擾）。
①Seed.com圖片是資訊的一部分
右側產品切面圖提供產品結構資訊。背景影象像"顯微鏡視角"，暗示科學性。使用 Glassmorphism 避免背景影響閱讀。
② Flamingo Estate：絕對乾淨的產品圖
產品居中，沒有多餘道具，不分散注意力。Hover 切換影象提供"額外資訊"而非花哨。影象與列嚴格居中，形成視覺秩序。
UX視覺設計師實操方法
商品拍攝或選圖遵循：
- 居中、乾淨、無複雜道具
- 背景統一（白、淺灰）
- 資訊性圖片優先（結構、成分、用途）。
圖片不要淹沒文字區域；必要時加：
- 蒙層
- 玻璃擬態遮罩
- 區域性漸變
排名
影響效果
技術難度
資訊層級
color
image
Grid
Impact
Technical Difficulty
Information Hierarchy
color
image
Grid